<template>
  <div id="desktop">
    <template v-if="$route.path == '/'">
      <div v-for="i in apps" :key="i.id" class="item" @click="$router.push(i.id)">
        <img :src="i.icon" alt="i.name">
        {{ i.name }}
      </div>
    </template>
    <router-view v-else></router-view>
  </div>
</template>
<script>
module.exports =  {
  mounted () {
  },
  data(){
    return {
      apps:[{
        name: "串口工具",
        icon: "./img/522339.png",
        id: "serialport"
      },{
        name: "波形分析",
        icon: "./img/502212.png",
        id: "wave"
      }]
    }
  },
  methods: {
    open(id){
      this.$emit('set-location', id)
    }
  }
}
</script>
<style lang="less">
#desktop{
  width: 100%;
  height: 100%;
  .item{
    width: 90px;
    height: 80px;
    text-align: center;
    line-height: 1.5;
    padding: 20px;
    letter-spacing: .059em;
    user-select: none;
    text-shadow: 0 1px 1px #000;
    float: left;
    cursor: pointer;
    &:hover{
      background-color: rgba(0,0,0,.1);
    }
    img{
      width: 60px;
      height: 60px;
      object-fit: cover;
      display: block;
      margin: auto;
      margin-bottom: 10px;
    }
  }
}
</style>